<template>
	<view @touchstart="handleTouchstart" @touchend="handleTouchend">
		学习触屏事件
	</view>
</template>

<script>
	/* 给容器绑定两个触屏事件touchstart和touchend
	 1.记录用户按下屏幕的时间 Date.now() 注意：返回的时时间戳，1970 -1-1 到现在的毫秒数
	 2.记录用户按下屏幕的坐标 x 和 y
	 3.记录用户离开屏幕的时间 Date.now()
	 4.记录用户离开屏幕的坐标 x 和 y
	 5.根据两个时间 运算 判断 用户按下屏幕时长是否合法
	 6.根据两对坐标 判断距离是否合法 判断 滑动方向
	 7.判断用户滑动距离是否合法 => 取绝对值判断距离
	 8.判断滑动的方向 => 相减 正为右滑 负为左滑
	 
	
	 
	 */
	export default {
		data() {
			return {
				// 按下的坐标
				startX:0,
				startY:0,
				// 按下的时间
				startTime:0
			}
		},
		methods: {
			handleTouchstart(event){
				// console.log('手指按下屏幕');
				// console.log('按下x',event.changedTouches[0].clientX);
				// console.log('按下y',event.changedTouches[0].clientY);
				// 记录按下的时间
				this.startTime = Date.now()
				// 记录按下的x和y坐标
				this.startX = event.changedTouches[0].clientX
				this.startY = event.changedTouches[0].clientY
				
			},
			handleTouchend(event){
				// console.log('手指离开屏幕');
				// console.log('离开x',event.changedTouches[0].clientX);
				// console.log('离开y',event.changedTouches[0].clientY);
				// 记录离开的时间
				const endTime = Date.now()
				// 记录离开的坐标
				const endX = event.changedTouches[0].clientX
				const endY = event.changedTouches[0].clientY
				// 判断按下的时长
				if(endTime - this.startTime >2000){
					return
				}
				
				// 声明一个变量来存储滑动的方向
				let direction = ""
				// 判断用户滑动的距离是否合法,合法就判断滑动的方向,注意:距离要加上绝对值
				if(Math.abs(endX-this.startX)>10){
					direction = endX - this.startX>0?"right":"left"
				}else{
					// 轻微滑动无效
					return
				}
				
				console.log('滑动的方向',direction)
				
			}
		}
	}

</script>

<style>
view{
	width: 100%;
	background-color: #bfa;
	height: 400rpx;
}
</style>
